import React from 'react'
import './css/begin.scss'
import IconFont from './Tubiao';
import { useNavigate,useLocation } from 'react-router-dom';
import { Sticky, Cell, Steps } from 'react-vant';
// import { Steps, Step } from '@nutui/nutui-react'
import '@nutui/nutui-react/dist/style.css'
export default function Wuliu() {
    const navigate = useNavigate()
    const location = useLocation()
    return (
        <div>
            <Sticky>
                <div className='top'>
                    <span className='icon' onClick={() => (navigate('/order'))}>
                        <IconFont name='icon-arrowLeft'></IconFont>
                    </span>
                    <span>物流信息</span>
                </div>
            </Sticky>
            <div>
                <span style={{marginLeft:'20px'}}>运单号:</span>
                <Cell title={`${location.state.item._id }`} value='配送中' label='北京市--》深圳市' />
            </div>
            <div style={{ height: '300px', padding: '15px 30px' }}>
                <Steps direction="vertical" active={8} activeColor='#FF6262' inactiveColor='#CCCCCC'>
                    <Steps.Item>
                        <h3>您的订单开始处理</h3>
                        <p>2024-06-11 10:00</p>
                    </Steps.Item>
                    <Steps.Item>
                        <h3>卖家已发货</h3>
                        <p>2024-06-11 10:00</p>
                    </Steps.Item>
                    <Steps.Item>
                        <h3>包裹正在揽收</h3>
                        <p>2024-06-11 10:00</p>
                    </Steps.Item>
                    <Steps.Item>
                        <h3>在北京市进行下级地点扫描</h3>
                        <p>2024-06-11 10:00</p>
                    </Steps.Item>
                    <Steps.Item>
                        <h3>在北京丰台区转运</h3>
                        <p>2024-06-11 10:00</p>
                    </Steps.Item>
                    <Steps.Item>
                        <h3>在分拨中心广东深圳公司进行卸车扫描</h3>
                        <p>2024-06-11 10:00</p>
                    </Steps.Item>
                    <Steps.Item>
                        <h3>在广东深圳公司进行发出扫描</h3>
                        <p>2024-06-11 10:00</p>
                    </Steps.Item>
                    <Steps.Item>
                        <h3>【深圳市】科技园派送员宋平正在为您派件</h3>
                        <p>2024-06-11 10:00</p>
                    </Steps.Item>
                </Steps>



                {/* <Steps direction="vertical" value={5}>
                    <Step
                        value={1}
                        description="您的订单开始处理"
                    />
                    <Step value={2} title="已发货" description="卖家已发货" />
                    <Step
                        value={3}
                        title="已揽件"
                        description="包裹正在揽收"
                    />
                    <Step
                        value={4}
                        description="在北京市进行下级地点扫描"
                    />
                    <Step
                        value={5}
                        description="在北京丰台区转运"
                    />
                    <Step
                        value={6}
                        description="在分拨中心广东深圳公司进行卸车扫描"
                    />
                    <Step
                        value={7}
                        title="运输中"
                        description="在广东深圳公司进行发出扫描"
                    />
                    <Step
                        value={8}
                        title="派送中"
                        description="【深圳市】科技园派送员宋平正在为您派件"
                    />
                </Steps> */}
            </div>
        </div>
    )
}
